<template>
  <div class="app">
    <h3>我是App组件（祖），{{name}}--{{price}}</h3>
    <Child/>
  </div>

</template>

<script>
import { reactive, toRefs, provide } from 'vue';
import Child from './components/Child.vue'
export default {
  name: 'App',
  components: {
    Child,
  },
  setup() {
    let car = reactive({
      name: 'benz',
      price: '40w',
    })

    //provide和inject，适用于父子/祖孙组件之间通信，祖先组件(provide)提供数据，后代组件(inject)注入数据
    
    //给自己的后代组件传递数据，第一个参数是key数据名，第二个是value数据值
    provide('car', car)
    return {
      ...toRefs(car),
    }
  }
}
</script>

<style>
.app{
  background-color: gray;
  padding: 10px;
}
</style>
